<template>
  <div class="location-editor">
    <h3>位置题</h3>
    <el-form :model="locationModel" label-position="left" label-width="50px" ref="locationForm">
      <el-form-item label="标题" prop="title" required>
        <el-input v-model="locationModel.title"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="locationModel.description"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="click-location">
          <i class="el-icon-location-outline text"></i>
          <span class="text">点击获取当前位置</span>
        </div>
      </el-form-item>
      <el-form-item label="必做" prop="must">
        <el-switch v-model="locationModel.must"></el-switch>
      </el-form-item>
    </el-form>
    <div class="q-item q-item-control">
      <el-button type="primary" @click="handleSave">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "QeditorLocation",
  props: {
    setting: {
      type: Object,
      default: function () {
        return {
          type: 'location',
          must: true,
          title: '位置题',
          description: '填写位置信息',
          location: ''
        }
      }
    }
  },
  data() {
    return {
      locationModel: {}
    }
  },
  methods: {
    loadOrigin() {
      // 保存一份副本，以便取消更改时复原
      this.locationModel = JSON.parse(JSON.stringify(this.setting));
    },
    handleSave() {
      // 否则检测是否满足验证函数
      // 满足则将新的表单提交给上级
      this.$refs.locationForm.validate(valid => {
        if (valid) {
          this.$emit("change", this.locationModel);
        } else {
          this.$message({ type: "warning", message: "请检查信息是否完整" });
        }
      });
    },
    handleCancel() {
      // 取消则还原修改
      this.loadOrigin();
      this.$emit("cancel", this.radioModel);
    },
  },
  mounted() {
    this.loadOrigin();
  },
  watch: {
    setting(newVal, oldVal) {
      this.loadOrigin();
    }
  }
}
</script>

<style scoped>
.location-editor {
  display: inline-block;
  zoom: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px dashed #e0e0e0;
  padding: 6px 10px;
  background: #fafafa;
  color: #b2b2b2;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.8em;
}
.rate-editor .option .el-input {
  width: 75%;
  margin: 0 50px 0 0;
}
.click-location {
  height: 40px;
  background-color: white;
  border-radius: 4px;
  border-color: black;
}
.text {
  line-height: 40px;
}
</style>